<template>
  <div class="bac">
    <!-- <header-tab>
      <span slot="left" @click="Go_back">
        <van-icon name="arrow-left" />
      </span>
      <span slot="right" @click="Go_register">注册</span>
    </header-tab> -->
    <!-- 版心 -->
    <div class="container">
      <div class="zdy-nav">
        <span class="zdy-back"></span>
        <span class="zdy-login"><router-link to="/register">注册</router-link> </span>
      </div>
      <!-- 注册表单 -->

      <van-cell-group>
        <h1 class="zhuce-font">登录</h1>
        <!-- 手机号码 -->
        <van-field left-icon="/img/icon/my.png" placeholder="请输入邮箱" v-model="email" clearable />

        <!-- 密码 -->
        <van-field v-model="pwd" clearable left-icon="/img/icon/pwd.png" placeholder="请输入密码" type="password" />

        <van-button type="primary" block style="border-radius: 30px" native-type="submit" @click="GoLogin"
          >登录</van-button
        >
      </van-cell-group>

      <!-- 底部 -->
      <div class="zdy-bottom">
        <!-- 分割线 -->
        <van-divider style="margin: 1rem 0">其他登录方式</van-divider>
        <van-grid :border="false" direction="horizontal" :column-num="3" icon-size="3rem">
          <van-grid-item icon="/img/icon/qq.png" />
          <van-grid-item icon="/img/icon/weibo.png" />
          <van-grid-item icon="/img/icon/chat.png" />
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script>
// import HeaderTab from "@/components/HeaderTab.vue";
import { mapMutations, mapState } from 'vuex';
export default {
  computed: {
    ...mapState[('email', 'uid', 'uname', 'token')],
    ...mapMutations[('updataEmail', 'updataUid', 'updataUname', 'changeToken')],
  },

  data() {
    return {
      email: '',
      sms: '',
      pwd: '',
    };
  },
  methods: {
    GoLogin() {
      let params = `uEmail=${this.email}&&uPwd=${this.pwd}`;
      this.axios.post('/user/login', params).then(res => {
        console.log('登录状态', res);
        if (res.data.code == 200) {
          this.$toast({
            message: '登录成功',
            icon: require('../assets/img/logo1.png'),
          });
          sessionStorage.setItem('token', res.data.token);
          sessionStorage.setItem('UserID', res.data.u_id);
          sessionStorage.setItem('Uname', res.data.u_name);
          sessionStorage.setItem('Uphone', res.data.u_name);
          this.$store.commit('updataEmail', this.email);
          // console.log(res.data.u_id);
          this.$store.commit('updataUid', res.data.u_id);
          this.$store.commit('updataUname', res.data.u_name);
          this.$store.commit('changeToken', res.data.token);

          this.$router.push('/index');
        } else {
          this.$toast('邮箱或密码错误');
        }
      });
    },
    Go_register() {
      this.$router.push({ path: '/register' });
    },
  },
};
</script>

<style lang="scss" scoped>
.bac {
  display: flex;
  height: 100vh;
  background: url('/public/img/background/reg_bg.jpg');
  background-color: #f7f7f7;
  background-size: 100vw 24rem;
  background-repeat: no-repeat;
}
.van-cell-group {
  border-radius: 1rem;
  border: none;
  padding: 4rem;
  margin-top: 6rem;
  clear: both;
}
.zdy-bottom {
  background: #f7f7f7;
}
.van-hairline--top-bottom::after,
.van-hairline-unset--top-bottom::after {
  border: none;
}

.van-button--primary {
  background-color: #fecb1c;
  border: none;
}
.van-field__control,
.van-field__error-message {
  padding-left: 3rem;
}
.van-cell {
  display: flex;
  align-items: center;
}
.container {
  width: 34rem;
  margin: 1rem auto;
}
.zhuce-font {
  color: #fecb1c;
  text-align: center;
  margin: 0;
  padding: 0;
  // margin-top: -2rem;
  margin-bottom: 2rem;
}
.van-button--info {
  background-color: #fecb1c;
}

.van-grid-item__content {
  background-color: #f7f7f7;
}
.zdy-nav {
  a:link {
    color: #fecb1c;
  }
  a:visited {
    color: #fecb1c;
  }
  a:hover {
    color: #fecb1c;
  }
  a:active {
    color: #fecb1c;
  }
  display: flex;
  justify-content: space-between;
  color: #fecb1c;
  font-size: 1.6rem;
  .zdy-login {
    background-color: white;
    width: 5rem;
    text-align: center;
    height: 3rem;
    line-height: 3rem;
    border-radius: 1rem;
  }
  span:first-child {
    width: 3rem;
    height: 3rem;
    img {
      width: 3rem;
      height: 3rem;
    }
  }
}
</style>
